var oC = document.getElementById("canvas");
var ctx = oC.getContext("2d");
var speedT = 5;

var start2 = document.getElementById("t_btn");
var way = document.getElementById("t_way");

var start = false; // 用来标记动画是否执行
// 屏幕的宽高 
var screen_width = document.documentElement.clientWidth;
var screen_height = document.documentElement.clientHeight;

oC.width = screen_width;
oC.height = screen_height;
var scrollY = 0;
var scrollY0 = 0;

loading({
	background: "img/19_bg.png",
	ownCar: "img/19_ownCar.png",
	left: "img/19_left.png",
	right: "img/19_right.png",
	speedUp: "img/19_speedUp.png",
	speedDown: "img/19_speedDown.png",
	clock: "img/19_clock.png",
	begin: "img/19_begin.png",
	//	doorLeft: "img/20_carLeft.png",
	//	doorRight: "img/20carRight.png",
	car: "img/20_zhangaiCar.png",
	zhuzi: "img/20_zhangaiwu.png"

}, {
	complete: main
});

// 第一页  第二页  规则
$(function() {
	$(".go").on("touchstart", function() {
		$(".first").hide(300);
		$(".second").show();
	})
	$(".rule").on("touchstart", function() {
		$(".show").show(300);
	})
	$(".cha").on("touchstart", function() {
			$(".show").hide(300);
		})
		// 游戏页面
	$(".sm").on("touchstart", function() {
			$(".second").hide(300);
			$(".third").show(300);
			timeQi();
		})
		//	 红绿灯
	function timeQi() {
		setTimeout(function() {
			$('.deng1').hide();
			$('.deng2').show();
			setTimeout(function() {
				$('.deng2').hide();
				$('.deng3').show();
				setTimeout(function() {
					$('.deng3').hide();
					$('.deng4').show();
					$('.deng1').hide();
					$('.deng2').hide();
					// 时间
					var timer = 0;
					clearInterval(timer);
					timer = setInterval(function() {
						speedT--;
						if(speedT == -1) {
							//						alert("over");
							clearInterval(timer);
							start = false;
							$(".third").hide(300);
							$(".five").show(300);
							//$(".four").show(300);
						} else {
							$(".times").text("0 : 0 : " + speedT);
						}
					}, 1000);
					setTimeout(function() {
						$('.deng4').slideUp();
						$(".ready").slideUp();
						start = true;
					}, 1000);
				}, 1000);
			}, 1000);
		}, 1000);
	};
	//	timeQi();
	// 游戏 排行榜
	$(".paihang").on("touchstart", function() {
		$(".bang").show(300);
	})
	$(".cha2").on("touchstart", function() {
			$(".bang").hide(300);
		})
		// 游戏失败页
		//	$(".again").on("touchstart", function() {
		//		$(".first").show(300);
		//		$(".four").hide(300);
		//
		//	});
		// 游戏成功页  邀请导师
	$(".p1").text("你共闯过了" + "666" + "个障碍物");
	$(".p2").text("胜出全国" + "99%" + "的玩家");

	// 抽奖
	$(".welcome").on("touchstart", function() {
		$(".five").hide();
		$(".six").show();
		choujiang();
	})

	// 第二种，点击按钮之后就开始转，得到数字计算在哪停
	function choujiang() {
		start2.addEventListener("touchstart", function() {
			$("#t_btn img").hide();
			$.ajax({
				url: "choujiang.php",
				type: "get",
				dataType: "json",
				success: function(data) {
					num = data.num;
				}
			});
			var num = -1;
			var deg = 0;
			var timer = setInterval(function() {
				deg++;
				way.style.transform = "rotate(" + deg + "deg)";
				if(deg >= 720) {
					// 在获取到num之后再决定什么时候停止
					
						if(num == 2) {
							if(deg % 360 == 360 / 12 * num) {
								clearInterval(timer);
								setTimeout(function(){
									$(".six").hide();
									$(".seven").show();											$(".imgs").attr("src","img/14_dao"+num+".png")
								},1000)
							}
							
						}else if(num == 3){
							if(deg % 360 == 360 / 12 * num) {
								clearInterval(timer);
								setTimeout(function(){
								$(".seven_two").show();	
								},1000)
							}
						}
					
					
				}
			}, 5)

		}, false)
	}

});

function rand(min, max) {
	return Math.floor(Math.random() * (max - min + 1) + min);
}

function checkP(obj1, obj2) {
	if(Math.abs(obj1.x + obj1.w / 2 - (obj2.x + obj2.w / 2)) <= obj1.w / 2 + obj2.w / 2 && Math.abs(obj1.y + obj1.h / 2 - (obj2.y + obj2.h / 2)) <= obj1.h / 2 + obj2.h / 2) {
		return true;

	} else {
		return false;
	}
}

function main(obj) {
	carImg = obj.ownCar;
	var car = {
		img: carImg,
		w: carImg.width,
		h: carImg.height,
		x: screen_width / 2 - carImg.width / 2,
		y: screen_height - carImg.height - 20
	}
	leftImg = obj.left;
	var leftI = {
		img: leftImg,
		w: leftImg.width,
		h: leftImg.height,
		x: screen_width / 2 - leftImg.width / 2,
		y: screen_height - leftImg.height - 20
	}
	rightImg = obj.right;
	var rightI = {
		img: rightImg,
		w: rightImg.width,
		h: rightImg.height,
		x: screen_width / 2 - rightImg.width / 2,
		y: screen_height - rightImg.height - 20
	}
	clockImg = obj.clock;
	var clock = {
		img: clockImg,
		w: clockImg.width,
		h: clockImg.height,
		x: screen_width / 2 - clockImg.width / 2,
		y: screen_height - clockImg.height - 20
	}
	speedUpImg = obj.speedUp;
	var speedUp = {
		img: speedUpImg,
		w: speedUpImg.width,
		h: speedUpImg.height,
		x: screen_width / 2 - speedUpImg.width / 2,
		y: screen_height - speedUpImg.height - 20
	}
	beginImg = obj.begin;
	var begin = {
			img: beginImg,
			w: beginImg.width,
			h: beginImg.height,
			x: screen_width / 2 - beginImg.width / 2,
			y: screen_height - beginImg.height - 20
		}
		// 装障碍物的数组
	var pillars = [];
	var cars = [];
	// 障碍物  柱子
	function pillar() {
		this.img = obj.zhuzi;
		this.w = this.img.width;
		this.h = this.img.height;
		this.x = rand(15, 260);
		this.y = -this.h;
		this.speed = 2;
	}
	pillar.prototype.draw = function() {
		ctx.drawImage(this.img, this.x, this.y, this.w - 20, this.h - 20);
	}
	pillar.prototype.move = function() {
		this.y += this.speed;
	}
	pillar.prototype.canClear = function() {
		if(this.y >= screen_height) {
			return true;
		} else {
			return false;
		}
	}

	// 障碍物 车
	//	function car() {
	//		this.img = obj.car;
	//		this.w = this.img.width;
	//		this.h = this.img.height;
	//		this.x = rand(15, 260);
	//		this.y = -this.h;
	//		this.speed = 2;
	//	}
	//	car.prototype.draw = function() {
	//		ctx.drawImage(this.img, this.x, this.y, this.w - 20, this.h - 20);
	//	}
	//	car.prototype.move = function() {
	//		this.y += this.speed;
	//	}
	//	car.prototype.canClear = function() {
	//		if(this.y >= screen_height) {
	//			return true;
	//		} else {
	//			return false;
	//		}
	//	}

	// 页面加载时画的   没有动画的时候
	function drawBack() {
		// 画背景
		ctx.drawImage(obj.background, 0, scrollY, oC.width, oC.height);
		ctx.drawImage(obj.background, 0, scrollY, oC.width, -oC.height);
		// 画起跑位置
		ctx.drawImage(begin.img, begin.x + 140, begin.y - 223 + scrollY0, begin.w - 280, begin.h - 30);
		// 画小汽车
		ctx.drawImage(car.img, car.x + 20, car.y - 60, car.w - 40, car.h - 70);
		// 画  左右操控按钮
		ctx.drawImage(leftI.img, leftI.x - 35, leftI.y + 20, leftI.w - 65, leftI.h - 65);
		ctx.drawImage(rightI.img, rightI.x + 95, rightI.y + 20, rightI.w - 65, rightI.h - 65);
		// 画 时间
		ctx.drawImage(clock.img, clock.x - 50, clock.y - 520, clock.w - 100, clock.h - 50);
		// 画 加速器	
		ctx.drawImage(speedUp.img, speedUp.x + 170, speedUp.y + 20, speedUp.w - 50, speedUp.h - 80);
	}
	drawBack();

	function drawAll() {
		// 判断start的布尔值  来决定画布是否动
		if(start) {
			scrollY += 2;
			scrollY0++;
			// 背景动起来
			ctx.clearRect(0, 0, screen_width, screen_height);

			if(scrollY >= screen_height) {
				scrollY = 0;
			}

			// 画背景
			ctx.drawImage(obj.background, 0, scrollY, oC.width, oC.height);
			ctx.drawImage(obj.background, 0, scrollY, oC.width, -oC.height);
			// 画起跑位置
			ctx.drawImage(begin.img, begin.x + 140, begin.y - 223 + scrollY0, begin.w - 280, begin.h - 30);
			// 画柱子
			if(scrollY % 200 == 0) {
				var pillara = new pillar(obj.zhuzi);
				pillars.push(pillara);

			}
			for(var i = 0; i < pillars.length; i++) {
				var pillarb = pillars[i];
				if(pillarb.canClear()) {
					pillars.splice(i, 1);
					i--;
				}
				pillarb.draw();
				pillarb.move();
			}
			//			// 画车
			//			if(scrollY % 399 == 0) {
			//				var cara = new car(obj.car);
			//				cars.push(cara);
			//
			//			}
			//			for(var i = 0; i < cars.length; i++) {
			//				var carb = cars[i];
			//				if(carb.canClear()) {
			//					cars.splice(i, 1);
			//					i--;
			//				}
			//				carb.draw();
			//				carb.move();
			//			}
			// 画小汽车
			ctx.drawImage(car.img, car.x + 20, car.y - 60, car.w - 40, car.h - 70);
			// 画  左右操控按钮
			ctx.drawImage(leftI.img, leftI.x - 35, leftI.y + 20, leftI.w - 65, leftI.h - 65);
			ctx.drawImage(rightI.img, rightI.x + 95, rightI.y + 20, rightI.w - 65, rightI.h - 65);
			// 画 时间
			ctx.drawImage(clock.img, clock.x - 50, clock.y - 520, clock.w - 100, clock.h - 50);
			// 画 加速器	
			ctx.drawImage(speedUp.img, speedUp.x + 170, speedUp.y + 20, speedUp.w - 50, speedUp.h - 80);

			// 画 时间
			ctx.drawImage(clock.img, clock.x - 50, clock.y - 520, clock.w - 100, clock.h - 50);
		}
		// 无限滚动
		window.requestAnimationFrame(drawAll);

	}
	drawAll();
	oC.addEventListener("touchstart", function() {
		event.preventDefault();
		var x = event.touches[0].clientX;
		var y = event.touches[0].clientY;
		//		console.log(leftI);
		// 判断有没有点到左控制键
		var timer1 = null;
		var timer2 = null;
		if(x >= leftI.x - 35 && x <= leftI.x - 35 + leftI.w - 65 && y >= leftI.y + 20 && y <= leftI.y + 20 + leftI.h - 65) {
			//			console.log("左");
			timer1 = setInterval(function() {
				if(car.x > 10) {
					car.x = car.x - 5;
				} else {
					clearInterval(timer1);
					//					car.x = 10;
				}
			}, 20)
		} else if(x >= rightI.x + 95 && x <= rightI.x + 95 + rightI.w - 65 && y >= rightI.y + 20 && y <= rightI.y + 20 + rightI.h - 65) {
			//			console.log("右");
			timer2 = setInterval(function() {
				if(car.x < 260) {
					car.x = car.x + 5;
				} else {
					clearInterval(timer2);
					//					car.x = 260;
				}
			}, 20)
		}
		oC.addEventListener("touchend", function() {
			clearInterval(timer1);
		}, false);
		// 判断有没有点到右控制键

		oC.addEventListener("touchend", function() {
			clearInterval(timer2);
		}, false);
	}, false);

}